<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import {getChatData} from '@/api/common';
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartName:{
      type: String,
      default:''
    },
    action:{
      type:String,
      require:true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  created(){
    getChatData(this.action).then(data=>{
      this.$nextTick(() => {
        this.initChart(data);
      })
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(chatData) {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          bottom: '10',
          data: chatData.column
        },
        series: [
          {
            name: this.chartName,
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '38%'],
            data: chatData.data,
            animationEasing: 'cubicInOut',
            animationDuration: 2600,
            label:{            //饼图图形上的文本标签
              normal:{
                show:true,
                //position:'inner', //标签的位置
                textStyle : {
                    fontWeight : 300 ,
                    fontSize : 16    //文字的字体大小
                },
                formatter:'{b} {d}%'

                    
              }
            },
          }
        ]
      })
    }
  }
}
</script>
